<template>
    <div>

        <top></top>

        <Breadcrumbs />

        <v-container>
<!--            <v-row>-->
<!--                <v-col cols="12">-->
<!--                    <h1>新闻列表</h1>-->
<!--                </v-col>-->
<!--            </v-row>-->
            <v-row>
                <v-col cols="12" v-for="news in newsList" :key="news.id">
                    <v-card>
                        <v-card-title>{{ news.title }}</v-card-title>
                        <v-card-text>
                            <p>
                                {{ getShortDescription(news.description) }}
                                <span CLASS="showinfo" @click="goToNewsDetail(news.id)"  >查看详情</span>
                            </p>
                            <v-btn
                                   small
                                   class="rounded-pill"
                                   color="primary">时间：2025-01-20</v-btn>
                        </v-card-text>
                    </v-card>
                </v-col>
            </v-row>
        </v-container>


    </div>
</template>

<script>
import axios from "axios";
import { mapGetters } from "vuex";

import Top from "../common/top.vue";
import Breadcrumbs  from "../common/breadcrumbs.vue";


export default {
    data: () => ({
        dialog: false,
        banner: [],
        newsList: [
            {
                id: 1,
                title: '案例标题 1',
                description: '这是一条很长的新闻简介，用于测试简介截断功能。这是一条很长的新闻简介，用于测试简介截断功能这是一条很长的新闻简介，用于测试简介截断功能。这是一条很长的新闻简介，用于测试简介截断功能这是一条很长的新闻简介，用于测试简介截断功能。这是一条很长的新闻简介，用于测试简介截断功能这是一条很长的新闻简介，用于测试简介截断功能。这是一条很长的新闻简介，用于测试简介截断功能这是一条很长的新闻简介，用于测试简介截断功能。这是一条很长的新闻简介，用于测试简介截断功能。这是一条很长的新闻简介，用于测试简介截断功能。'
            },
            {
                id: 2,
                title: '案例标题 2',
                description: '这是另一条新闻简介，也会进行截断处理。这是另一条新闻简介，也会进行截断处理。'
            },
            {
                id: 3,
                title: '案例标题 3',
                description: '这是另一条新闻简介，也会进行截断处理。这是另一条新闻简介，也会进行截断处理。'
            }
        ],
        home_h5_diy:[],
        qr_code: "",
        app_name: '',
    }),
    components: {
        Top,Breadcrumbs
    },
    computed: {
        ...mapGetters(["uid"]),
    },
    created() {
        this.load();
        this.saveCode();
    },
    methods: {
        getShortDescription(description) {
            if (description.length <= 100) {
                return description;
            }
            return description.slice(0, 100) + '...';
        },
        goToNewsDetail(id) {
            this.$router.push({ name: 'LoanCaseInfo', params: { id } });
        },
        callPhone() {
            // 实际的拨打电话功能需要根据实际情况实现，这里只是个示例
            alert('拨打电话给店铺');
        },
        saveCode(){
            // if (this.$route.query.code) {
            //     console.log('邀请码：',this.$route.query.code)
            //     // 将邀请码存储到localStorage
            //     localStorage.setItem('inviteCode', this.$route.query.code);
            // }
        },
        load() {
            // axios
            //     .get(`/v1/home`)
            //     .then((response) => {
            //         this.banner = response.data.data.banner;
            //         this.home_h5_diy = response.data.data.home_h5_diy;
            //         console.log('this.home_h5_diy',this.home_h5_diy)
            //         this.appName = response.data.data.app_name;
            //     })
            //     .catch(function () {})
            //     .then(function () {});
        },

        goPlan() {
            // if (this.uid && this.uid > 0) {
            //     this.$router.push({ path: `/loan` });
            // } else {
            //     this.$toasted.show("请联系客服进行开通", {
            //         type: "error",
            //         position: "bottom-center",
            //     });
            // }
        },
    },
};
</script>

<script setup>
// 这里可以添加逻辑代码，如果没有则留空
</script>

<style scoped>
.showinfo{
color: #ba2b39;
}
</style>
